<template>
  <div class="box">
      <navgitor :title="'设置'" :color="'#fff'" :left="true" :bgColor="'rgb(50,134,255)'" :bgBorderBottom="'none'"></navgitor>
      
      <div class="list" @click="$router.push({path:'/Edit'})">
          <div class="icon">
              <img src="../../../static/user/set/revise.png" alt="">
          </div>
          <div class="title">
              修改资料
          </div>
          <div class="right">

          </div>
      </div>
      <div class="list" @click="$router.push({path:'/Forget'})">
          <div class="icon">
              <img src="../../../static/user/set/password.png" alt="">
          </div>
          <div class="title">
              修改密码
          </div>
          <div class="right">

          </div>
      </div>
      <div class="list" @click="$router.push({path:'/Address'})">
          <div class="icon">
              <img src="../../../static/user/address/address.png" alt="">
          </div>
          <div class="title">
              收货地址
          </div>
          <div class="right">

          </div>
      </div>
      <div class="list" @click="$router.push({path:'/Reward'})">
          <div class="icon">
              <img src="../../../static/user/set/incite.png" alt="">
          </div>
          <div class="title">
              打赏记录
          </div>
          <div class="right">

          </div>
      </div>
      <div class="list" @click="$router.push({path:'/Star'})">
          <div class="icon">
              <img src="../../../static/user/set/score.png" alt="">
          </div>
          <div class="title">
              给个Star吧
          </div>
          <div class="right">

          </div>
      </div>
      <div class="list" @click="$router.push({path:'/Suggest'})">
          <div class="icon">
              <img src="../../../static/user/set/proposal.png" alt="">
          </div>
          <div class="title">
              给极点建议
          </div>
          <div class="right">

          </div>
      </div>
      <div class="list" @click="$router.push({path:'/About'})">
          <div class="icon">
              <img src="../../../static/user/set/into.png" alt="">
          </div>
          <div class="title">
              关于极点的那些事
          </div>
          <div class="right">

          </div>
      </div>
      <div class="btn">
          <button @click="submit()">
              退出登录
          </button>
      </div>
  </div>
</template>
<script>
  import navgitor from '@/components/nav-head';
  import {
    loginOut
  } from '@/api'
  export default {
      components:{
          navgitor
      },
      methods: {
        submit(){
            this.$Modal.confirm({
                // 显示提示框的标题
                title: '退出登录？',
                // 提示框的内容
                content: `<p>确认退出吗?</p>`,
                // 点击确认按钮后要发生的事件
                onOk: ()=>{
                   // 调用退出登录接口
                    loginOut().then(res => {
                        this.$Message.success('退出成功');
                        // 清空本地存储
                        localStorage.clear();
                        setTimeout(() => {
                            // replace  替换 路由
                            this.$router.replace('/Login')
                        }, 2000);
                    })
                }
            })            
        }
      }
  }
</script>
<style lang="scss" scoped>
  .box{
      padding-top: 44px;
      background-color: #f4f4f4;
      .list{
          display: flex;
          width: 100%;
          padding: 0 5%;
          background-color: #fff;
          height: 45px;
          .icon{
              width: 10%;
              height: 45px;
              display: flex;
              align-items: center;
              img{
                  height: 30px;
              }
          }
          .title{
              width: 85%;
              height: 45px;
              line-height: 45px;
              text-align: right;
              font-size: 12px;
          }
          .right{
              position: relative;
              width: 5%;
              height: 45px;
              &::after{
                  position: absolute;
                  content: '';
                  width: 7px;
                  height: 7px;
                  border-top: 1px solid #474747;
                  border-right: 1px solid #474747;
                  transform: rotate(45deg);
                  right: 0;
                  top: 19px;
              }
              &::before{
                  position: absolute;
                  content: '';
                  width: 200vw;
                  height: 1px;
                  background-color: #f4f4f4;
                  left: -140.5vw;
                  bottom: -0.5px;
                  transform: scale(0.5);
              }
          }
      }
  }
  .btn{
      width: 100%;
      text-align: center;
      margin-top: 20px;
      button{
          width: 80%;
          height: 40px;
          line-height: 40px;
          border: 0;
          outline: 0;
          background-color: rgb(50, 134, 255);
          color: #fff;
          border-radius: 7px;
      }
  }
</style>